<amplify-authenticator [services]="services" initialState="signUp">
  <!-- sign-up-field override -->
  <ng-template
    amplifySlot="sign-up-form-fields"
    let-validationErrors="validationErrors"
  >
    <!-- Re-use default `Authenticator.SignUp.FormFields` -->
    <amplify-sign-up-form-fields></amplify-sign-up-form-fields>

    <!-- Append & require Terms and Conditions field to sign up -->
    <amplify-checkbox
      [errorMessage]="validationErrors.acknowledgement"
      [hasError]="!!validationErrors.acknowledgement"
      name="acknowledgement"
      value="yes"
    >
      I agree with the Terms and Conditions
    </amplify-checkbox>
  </ng-template>

  <!-- signed-in content override -->
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h2>Welcome, {{ user.username }}!</h2>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>
